<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
  <div class="common-table-tree-wrapper">
    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <!--按钮-->
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:OPEN')" @click.prevent="openInnerTiket">开通月票</a>
          <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:IMPORT')" @click.prevent="importData">批量开通</a>
          <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:EXPORT')" @click.prevent="_export">导出</a>
          <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:RENEWBATCH')" @click.prevent="renewBatch">批量续费</a>
          <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:BATCHREFUND')" @click.prevent="batchRefund">批量退费</a>
        </div>

        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index +1}}</span>
              <span v-else-if="'ticketName'==props.prop" @click.prevent="checkConfigure(scope.row)" class="row-href"> {{ scope.row.ticketName }}</span>
              <span v-else-if="'price' == props.prop">{{ scope.row.price |formatMoney }}</span>
              <span v-else-if="'endRenewTime' == props.prop">{{ scope.row.endRenewTime |mileSecondToDate }}</span>
              <span v-else-if="'sendStatus' == props.prop">{{ scope.row.sendStatus |sendStatus }}</span>
              <span v-else-if="'createTime' == props.prop">{{ scope.row.createTime |mileSecondToDate }}</span>
              <span v-else-if="'updateTime' == props.prop">{{ scope.row.updateTime |mileSecondToDate }}</span>
              <span class="row-href" v-else-if="'carCode'==props.prop && scope.row.supportVirtualCarcode" @click.prevent="checkBindingCarCode(scope.row,'bindingCarCodeModal')">{{ scope.row[props.prop] }}</span>
              <span v-else-if="'inviteCarCurrentCount' == props.prop && scope.row.inviteCarCurrentCount != 0" @click.prevent="inviteCarCodeShowModal(scope.row,'invite_car_code_show_modal')" class="row-href">{{scope.row.inviteCarCurrentCount}}</span>
              <span v-else-if="'inviteCarCurrentCount' == props.prop && scope.row.inviteCarCurrentCount == 0">{{scope.row.inviteCarCurrentCount}}</span>
              <span :title="scope.row[props.prop]" v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <!--操作列内的按钮-->
        <template slot="operateCell" slot-scope="props">
          <el-table-column :label="props.label" fixed="right" width="180" class="operateCell">
            <template slot-scope="scope">
              <el-button :disabled='scope.row.validStatus==1' size="small" type="primary" icon="icon-edit" class="ake-icon-font" title="编辑" @click="toEdit(scope.row)" plain v-if="isPermmited('MONTH:TICKET:BILL:EDIT')"></el-button>

              <el-button :disabled='scope.row.validStatus==1' size="small" type="primary" icon="icon-refund" class="ake-icon-font" title="退款" @click="toRefund(scope.row)" plain v-if="isPermmited('MONTH:TICKET:BILL:REFUND')"></el-button>
              <el-button :disabled='scope.row.validStatus==1 || scope.row.configStatus!==1 || scope.row.renew===0' size="small" type="primary" icon="icon-renew" class="ake-icon-font" title="续费" @click="toRenew(scope.row)" plain v-if="isPermmited('MONTH:TICKET:BILL:RENEW')"></el-button>
              <!-- <el-button :disabled='scope.row.renew===0 || scope.row.validStatus==1 || scope.row.configStatus!==1' size="small" type="primary" icon="icon-delayed" class="ake-icon-font" title="延长续费时间" @click="toExtendTime(scope.row)" plain v-if="isPermmited('MONTH:TICKET:BILL:EXTEND_TIME')"></el-button> -->

              <el-button :disabled='scope.row.validStatus==1 || scope.row.configStatus!==1 || scope.row.renew===0' size="small" type="primary" icon="icon-delayed" class="ake-icon-font" title="延长续费时间" @click="toExtendTime(scope.row)" plain v-if="isPermmited('MONTH:TICKET:BILL:EXTEND_TIME')"></el-button>

              <!-- <el-button size="small" type="primary" icon="icon-edit" class="ake-icon-font" title="编辑" @click="toEdit(scope.row)" plain v-if="isPermmited('MONTH:TICKET:BILL:EDIT')"></el-button> -->
              <el-button :disabled='scope.row.parkSysType!==0' size="small" type="primary" icon="icon-synchronize" class="ake-icon-font" :title='scope.row.parkSysType!==0?"无需同步":"同步"' @click="toResyncBill(scope.row)" plain></el-button>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>

  <!--月票退款-->
  <basic-modal ref="refundModal" width="400" customeClass="refund-modal" static="true">
    <h3 slot="title">月票退款</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="refundForm" :model="refundModel" :rules="refundRules" label-position="left" label-width="80px">
        <el-form-item label="退款金额" prop="refundValue">
          <el-input placeholder="请输入退款金额" v-model="refundModel.refundValue" type="number" min="0" step="0.01"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" placeholder="请输入备注" :rows="3" v-model="refundModel.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitRefundForm()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('refundModal')">取消</button>
    </div>
  </basic-modal>

  <!--延长可续费时长-->
  <basic-modal ref="extendTimeModal" width="400" customeClass="extendTime-modal" static="true">
    <h3 slot="title">延长可续费时长</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="extendTimeForm" :model="extendTimeModel" :rules="extendTimeRules" label-position="left" label-width="50px" style="margin-top: 20px">
        <el-form-item label="延长" prop="timeLength">
          <el-input placeholder="请输入延长可续费时长" v-model="extendTimeModel.timeLength" type="number" min="0" step="1"></el-input>
          <span class="item-unit">个月</span> 
        </el-form-item>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitExtendTimeForm()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('extendTimeModal')">取消</button>
    </div>
  </basic-modal>

  <!-- 批量导入月票 -->
  <el-dialog title="批量导入月票" :visible.sync="dialogVisible" width="540px" class="zb-dialog import-ticket">
    <div class="srceen-setting-content">
      <div class="tabBox-wrap">
        <div class="tab-item" :class="{'active':tabIndex==1}" @click="tabIndex=1">
          <span>1</span>
          <span>下载模板</span>
        </div>
        <div class="tab-item" :class="{'active':tabIndex==2}" @click="tabIndex=2">
          <span>2</span>
          <span>导入文件</span>
        </div>
      </div>
      <div class="download-file-wrap" v-if="tabIndex==1">
        <div class="download-file-row">
          <span class="box-title">模板文件：</span>
          <div class="template-file-box">
            <img src="../../assets/img/ic_Excel.svg" alt="">
            <div>
              <span>批量导入订单模板.xls</span>
              <span>20.5 KB</span>
            </div>
          </div>
          <div class="download-btn-box" @click="downloadTmp()">
            <img src="../../assets/img/ic_download.svg" alt="">
            <span>下载</span>
          </div>
        </div>
        <div class="warm-tip-box">
          <p class="box-title">温馨提示</p>
          <div class="tip-font-box">
            <p>1.若无月票模板，请先下载模板文件</p>
            <p>2.按照模板文件格式进行填写，不可更改文件格式</p>
            <p>3.若有月票模板，可直接进行下一步操作</p>
          </div>
        </div>
      </div>
      <!-- 导入文件 -->
      <div class="import-file-wrap" v-else-if="tabIndex==2">
        <div class="import-file-row">
          <span>导入文件：</span>
          <div class="upload-file-wrap">
            <el-upload class="upload-demo" action="" :show-file-list="false" :on-change="handleChange" :auto-upload="false" :file-list="fileList">
              <el-input v-model="fileName" :disabled="true"></el-input>
              <el-button size="small" type="primary">选择</el-button>
            </el-upload>
            <el-button style="margin-left:10px" plain size="small" @click="sureImport">导入</el-button>
          </div>
        </div>
        <div class="upload-file-tip">支持.xls格式，且不超过8M</div>
        <div class="upload-file-result">
          <div class="percentage-box" v-if="uploadProgreeResult==1">
            <p>正在处理中...</p>
            <el-progress :percentage="percentage" status="success"></el-progress>
          </div>
          <div class="import-file-result" v-if="importResult && importResult.processedCount==importResult.totalCount">
            <div class="success-box" v-if="importResult.successCount==importResult.totalCount">
              <img src="../../assets/img/ic_opened_addvaule.svg" alt="">
              <span>全部月票导入成功！</span>
            </div>
            <div class="error-box" v-if="importResult.errorFileName">
              <img src="../../assets/img/ic_notopend_addvaule_red.svg" alt="">
              <div>
                <span>共{{importResult.totalCount}}张月票,失败{{importResult.failCount}}张</span>
                <span>请下载文件：<a class="text-btn ake-text-btn" style="color: #337ab7;" href="javascript:;" @click.stop="downloadError()">{{importResult.errorFileName}}</a>,根据失败原因重新填写上传</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" plain @click="dialogVisible = false" v-if="tabIndex==1">取 消</el-button>
      <el-button size="medium" plain @click="tabIndex=1" v-else-if="tabIndex==2"><i class="el-icon-arrow-left"></i>上一步</el-button>
      <el-button type="primary" size="medium" @click="tabIndex=2" v-if="tabIndex==1">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      <el-button type="primary" size="medium" @click="dialogVisible = false" v-else-if="tabIndex==2">关 闭</el-button>
    </div>
  </el-dialog>

  <!--导入-->
  <basic-modal ref="importModal" width="600" customeClass="import-modal" static="true" @closed="getList()">
    <h3 slot="title">批量导入月票</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="importForm" :model="importFile" :rules="importRules" label-position="left" label-width="160px">
        <el-form-item label="下载模板" v-show="!importResult||importResult.processedCount==importResult.totalCount">
          <a class="text-btn ake-text-btn" href="javascript:;" @click="downloadTmp()">批量导入订单模板.xls</a>
        </el-form-item>

        <el-form-item label="选择文件" prop="importFile" v-show="!importResult||importResult.processedCount==importResult.totalCount">
          <input type="file" id="fileInput" @change="getFile($event)" class="first-item file-input">
          <p class="help-block">支持.xls格式，大小不超过8.0M</p>
        </el-form-item>

        <el-form-item v-if="importResult && importResult.processedCount!=importResult.totalCount" label="正在处理中">
          <span v-if="importResult.processedCount!=importResult.totalCount">共{{importResult.totalCount}}张月票，当前已处理{{(importResult.processedCount/importResult.totalCount*100)|formatMoney}}%</span>
        </el-form-item>
        <el-form-item v-if="importResult && importResult.processedCount==importResult.totalCount" label="上次处理结果">
          <span v-if="importResult.successCount==importResult.totalCount">共{{importResult.totalCount}}张月票,全部成功(提示保留一天)</span>
          <span v-if="importResult.errorFileName">共{{importResult.totalCount}}张月票,失败{{importResult.failCount}}张,请下载失败文件,保留一天</span>
        </el-form-item>

        <el-form-item label="上次失败文件" v-show="importResult&&importResult.errorFileName">
          <a class="text-btn ake-text-btn text-btn_red" @click="downloadError()" href="javascript:;" v-text="importResult.errorFileName"></a>
        </el-form-item>

        <div class="import-notice">
          <span class="">
            <h5>温馨提示：请按照以下步骤进行导入</h5>
            <p>1.请先下载模板文件，严格按照模板文件格式进行填写，不可更改文件格式.</p>
            <p>2.模板文件填写完成后，浏览选择文件，然后点击上传。</p>
            <p>3.如果上传失败，请下载失败文件，并注意失败原因的提示。重新填写上传。</p>
            <p>4.失败文件可直接编辑并上传。</p>
          </span>
        </div>

      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button v-if="!importResult || importResult.processedCount==importResult.totalCount" class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="sureImport($event)">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('importModal')">关闭</button>
    </div>
  </basic-modal>

  <!--批量续费-->
  <basic-modal ref="renewBatchModal" width="600" customeClass="import-modal" static="true" @closed="getList()">
    <h3 slot="title">批量续费</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="renewBatchForm" :model="renewBatchForm" :rules="importRules" label-position="left" label-width="160px">

        <el-form-item label="下载模板" v-show="!renewBatchResult||renewBatchResult.processedCount==renewBatchResult.totalCount">
          <a class="text-btn ake-text-btn" href="javascript:;" @click="downloadTmp()">批量导入续费订单模板.xls</a>
        </el-form-item>

        <el-form-item label="选择文件" prop="renewBatchFile" v-show="!renewBatchResult||renewBatchResult.processedCount==renewBatchResult.totalCount">
          <input type="file" id="renewBatchFileInput" @change="getRenewBatchFile($event)" class="first-item file-input">
          <p class="help-block">支持.xls格式，大小不超过8.0M</p>
        </el-form-item>

        <el-form-item v-if="renewBatchResult && renewBatchResult.processedCount!=renewBatchResult.totalCount" label="正在处理中">
          <span v-if="renewBatchResult.processedCount!=renewBatchResult.totalCount">共{{renewBatchResult.totalCount}}张月票，当前已处理{{(renewBatchResult.processedCount/renewBatchResult.totalCount*100)|formatMoney}}%</span>
        </el-form-item>

        <el-form-item v-if="renewBatchResult && renewBatchResult.processedCount==renewBatchResult.totalCount" label="上次处理结果">
          <span v-if="renewBatchResult.successCount==renewBatchResult.totalCount">共{{renewBatchResult.totalCount}}张月票,全部成功(提示保留一天)</span>
          <span v-if="renewBatchResult.errorFileName">共{{renewBatchResult.totalCount}}张月票,失败{{renewBatchResult.failCount}}张,请下载失败文件,保留一天</span>
        </el-form-item>

        <el-form-item label="上次失败文件" v-show="renewBatchResult&&renewBatchResult.errorFileName">
          <a class="text-btn ake-text-btn text-btn_red" @click="downloadError4RenewBatch()" href="javascript:;" v-text="renewBatchResult.errorFileName"></a>
        </el-form-item>

        <div class="import-notice">
          <span class="">
            <h5>温馨提示：请按照以下步骤进行导入</h5>
            <p>1.请先下载模板文件，严格按照模板文件格式进行填写，不可更改文件格式.</p>
            <p>2.模板文件填写完成后，浏览选择文件，然后点击上传。</p>
            <p>3.如果上传失败，请下载失败文件，并注意失败原因的提示。重新填写上传。</p>
            <p>4.失败文件可直接编辑并上传。</p>
          </span>
        </div>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <el-button type="primary" size="medium" @click.stop="sureRenewBatch($event)">确认</el-button>
      <el-button size="medium" plain @click="closed('renewBatchModal')">关闭</el-button>
    </div>
  </basic-modal>

  <!--批量退费-->
  <basic-modal ref="batchRefundModal" width="600" customeClass="import-modal" static="true" @closed="getList()">
    <h3 slot="title">批量退费</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="batchRefundForm" :model="batchRefundForm" :rules="importRules" label-position="left" label-width="160px">

        <el-form-item label="下载模板" v-show="!batchRefundResult||batchRefundResult.processedCount==batchRefundResult.totalCount">
          <a class="text-btn ake-text-btn" href="javascript:;" @click="downloadTmp()">批量导入退费订单模板.xls</a>
        </el-form-item>

        <el-form-item label="选择文件" prop="batchRefundFile" v-show="!batchRefundResult||batchRefundResult.processedCount==batchRefundResult.totalCount">
          <input type="file" id="batchRefundFileInput" @change="getBatchRefundFile($event)" class="first-item file-input">
          <p class="help-block">支持.xls格式，大小不超过8.0M</p>
        </el-form-item>

        <el-form-item v-if="batchRefundResult && batchRefundResult.processedCount!=batchRefundResult.totalCount" label="正在处理中">
          <span v-if="batchRefundResult.processedCount!=batchRefundResult.totalCount">共{{batchRefundResult.totalCount}}张月票，当前已处理{{(batchRefundResult.processedCount/batchRefundResult.totalCount*100)|formatMoney}}%</span>
        </el-form-item>

        <el-form-item v-if="batchRefundResult && batchRefundResult.processedCount==batchRefundResult.totalCount" label="上次处理结果">
          <span v-if="batchRefundResult.successCount==batchRefundResult.totalCount">共{{batchRefundResult.totalCount}}张月票,全部成功(提示保留一天)</span>
          <span v-if="batchRefundResult.errorFileName">共{{batchRefundResult.totalCount}}张月票,失败{{batchRefundResult.failCount}}张,请下载失败文件,保留一天</span>
        </el-form-item>

        <el-form-item label="上次失败文件" v-show="batchRefundResult&&batchRefundResult.errorFileName">
          <a class="text-btn ake-text-btn text-btn_red" @click="downloadError4BatchRefund()" href="javascript:;" v-text="batchRefundResult.errorFileName"></a>
        </el-form-item>

        <div class="import-notice">
          <span class="">
            <h5>温馨提示：请按照以下步骤进行导入</h5>
            <p>1.请先下载模板文件，严格按照模板文件格式进行填写，不可更改文件格式.</p>
            <p>2.模板文件填写完成后，浏览选择文件，然后点击上传。</p>
            <p>3.如果上传失败，请下载失败文件，并注意失败原因的提示。重新填写上传。</p>
            <p>4.失败文件可直接编辑并上传。</p>
          </span>
        </div>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="sureBatchRefund($event)">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('batchRefundModal')">关闭</button>
    </div>
  </basic-modal>

  <!-- 编辑月票订单信息 -->
  <basic-modal ref="billEditModal" width="640" customeClass="bill-modal" static="true">
    <h3 slot="title">修改月票订单</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="billEditForm" :model="editBill" :rules="billRules" label-position="left" label-width="80px" class="bill" style="padding:0px 30px;">
        <el-form-item label="月票类型" prop="">
          <span class="form-item-text" style="width:100%">{{editBill.monthTicketName}}</span>
        </el-form-item>

        <div class="row-item">
          <el-form-item label="车主姓名" prop="userName">
            <el-input v-if="!canNotEdit" placeholder="请输入车主姓名" v-model="editBill.userName" type="text"></el-input>
            <span class="form-item-text" v-else>{{editBill.userName}}</span>
          </el-form-item>
          <el-form-item label="购买手机号" prop="userPhone" style="margin-left:30px">
            <el-input v-if="!canNotEdit" placeholder="请输入购买手机号" v-model="editBill.userPhone" type="text"></el-input>
            <span class="form-item-text" v-else>{{editBill.userPhone}}</span>
          </el-form-item>
        </div>
        <el-form-item label="车牌号" prop="carCode" v-if="!editBill.supportVirtualCarcode" class="carCodeChunk" style="margin-bottom:0px;">
          <el-form-item v-if="!canNotEdit" label-width="0px" :prop="'carCodeArr.'+index+'.key'" v-for="(item,index) in editBill.carCodeArr" style="margin-right:10px;display:inline-block;margin-bottom:16px;" :rules="[{required: true,message: '车牌号不能为空',trigger: 'change'},{validator:validateCarCode,trigger: ['change','blur']}]">
            <el-input placeholder="请输入车牌号" type="text" style="width:115px" v-model="item.key"></el-input>
            <img src="../../assets/img/ic_btn_delete.svg" alt="" class="del-carCode" @click="delCarCodeInput(index,editBill.carCodeArr)">
          </el-form-item>
          <span class="form-item-text" style="width:100px;margin-bottom:16px;" v-else v-for="(item,index) in editBill.carCodeArr">{{item.key}}</span>
          <img class="addCarCode" v-if="!canNotEdit" @click="addCarCodeInputForEdit" src="../../assets/img/ic_subscribe_add copy.svg" alt="">
        </el-form-item>
        <el-form-item label="无车牌" prop="" v-else>
          <div class="bindCarNoMethod-box" v-if="!canNotEdit">
            <a class="ake_btn ake_btn_text" @click.prevent="openScanQrModal(true)">绑定微信</a>
            <a class="ake_btn ake_btn_text" @click.prevent="getBindCardCode()">开新卡</a>
            <a class="ake_btn ake_btn_text" @click.prevent="readOldCard()">读旧卡</a>
          </div>
          <!-- 微信绑卡 -->
          <div class="wechat-card-box" v-if="cardNoBoxList.weixin.length">
            <div class="item-list">
              <div class="item" v-for="witem in cardNoBoxList.weixin">
                <div>
                  <p>
                    <span>{{witem.nickname}}</span>
                    <span>{{witem.carCode}}</span>
                  </p>
                </div>
                <img v-if="!canNotEdit" src="../../assets/img/ic_btn_delete.svg" alt="" @click="unBindingCarCode(1,witem)">
              </div>
            </div>
          </div>
          <!-- 开新卡 -->
          <div class="writeCardNo-box" v-if="cardNoBoxList.writeCard.length">
            <div class="item-list">
              <div class="item" v-for="bitem in cardNoBoxList.writeCard">
                <div>
                  <p>
                    <span>{{bitem.carCode}}</span>
                    <img src="../../assets/img/ic_card2.svg" alt="" v-if="bitem.isWriteCard">
                    <a class="ake_btn" v-show="!canNotEdit" v-else @click="writeCardOfBind(bitem)">写卡</a>
                  </p>
                  <div class="input-carNo-box" v-if="bitem.canWriteCardNo">
                    <el-input v-if="!canNotEdit" v-model.trim="bitem.carNo" placeholder="请备注卡片号码"></el-input>
                    <span v-else>{{bitem.carNo}}</span>
                    <a v-if="!canNotEdit" @click="saveBingRemarkCardNo(bitem)">完成</a>
                  </div>
                  <p class="modify-box" v-else>
                    <span>卡号：{{bitem.carNo}}</span>
                    <a v-if="!canNotEdit" class="add-btn" @click="bitem.canWriteCardNo=true">修改</a>
                  </p>
                  <p class="tip-red" v-show="bitem.required">请填写备注卡片号码并点击完成</p>
                </div>
                <img v-if="!canNotEdit" src="../../assets/img/ic_btn_delete.svg" alt="" @click="unBindingCarCode(2,bitem)">
              </div>
            </div>
          </div>
          <!-- 读旧卡 -->
          <div class="hadCardNo-box" v-if="cardNoBoxList.hadCard.length">
            <div class="item-list">
              <div class="item" v-for="hitem in cardNoBoxList.hadCard">
                <div>
                  <p>
                    <span>{{hitem.carCode}}</span>
                    <img src="../../assets/img/ic_card2.svg" alt="">
                  </p>
                  <div class="input-carNo-box" v-if="hitem.canWriteCardNo">
                    <el-input v-if="!canNotEdit" v-model.trim="hitem.carNo" placeholder="请备注卡片号码"></el-input>
                    <span v-else>{{hitem.carNo}}</span>
                    <a v-if="!canNotEdit" @click="saveHadCardNo(hitem)">完成</a>
                  </div>
                  <p class="modify-box" v-else>
                    <span>卡号：{{hitem.carNo}}</span>
                    <a v-if="!canNotEdit" class="add-btn" @click="hitem.canWriteCardNo=true">修改</a>
                  </p>
                  <p class="tip-red" v-show="hitem.required">请填写备注卡片号码并点击完成</p>
                </div>
                <img v-if="!canNotEdit" src="../../assets/img/ic_btn_delete.svg" alt="" @click="unBindingCarCode(3,hitem)">
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="备注1" prop="remark1">
          <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="editBill.remark1"></el-input>
        </el-form-item>
        <el-form-item label="备注2" prop="remark2">
          <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="editBill.remark2"></el-input>
        </el-form-item>
        <el-form-item label="备注3" prop="remark3">
          <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="editBill.remark3"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitBillEditForm()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('billEditModal')">取消</button>
    </div>
  </basic-modal>

  <!--开通月票-->
  <basic-modal ref="billModal" width="700" customeClass="bill-modal">
    <h3 slot="title">{{billModalTitle}}</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="billForm" :model="saveBill" :rules="billRules" label-position="left" label-width="115px" class="bill" style="width: 520px">
        <div class="row-item">
          <el-form-item label="月票类型" prop="monthTicketId">
            <!-- <div class="el-select">
              <div class="el-input el-input--suffix" @click="saveBill.isShowTicketName=!saveBill.isShowTicketName">
                <input type="text" readonly="readonly" autocomplete="off" placeholder="月票类型" class="el-input__inner" v-model="saveBill.monthTicketName">
                <span class="el-input__suffix">
                  <span class="el-input__suffix-inner">
                    <i class="rotate el-input__icon el-icon-arrow-down" :class="{rotate180:saveBill.isShowTicketName}"></i>
                  </span>
                </span>
              </div>
            </div>
            <div class="el-select-dropdown" v-show="saveBill.isShowTicketName">
              <ul class="dropdown-menu">
                <li v-for="(item,index) in monthTicketConfigList" @click="configChange(item)">{{item.ticketName}}</li>
              </ul>
              <div class="add-btn" @click="addMonthTicketType">
                <img src="../../assets/img/ic_subscribe_add.svg" alt="">
                <span style="color: #5995D8;">去创建</span>
              </div>
            </div> -->
            <div class="select-form-item">
              <el-select v-model="saveBill.monthTicketId" no-data-text="无匹配的搜索结果" filterable :placeholder="`${placeholderText}`" :filter-method="filterMonthTicketOptions" @focus="moticketOptionsFocus" @blur="placeholderText = '请选择'" @change="configChange">
                <el-option v-for="item in monthTicketConfigList" :key="item.id" :label="item.ticketName" :value="item.id">
                  <div class="select-form-item-bd">
                    <div class="select-form-item-left">
                      {{ item.ticketName }}
                    </div>
                    <el-tooltip class="item" effect="dark" placement="right">
                      <div slot="content" v-if="item.parkNameList">
                        <template v-for="item in item.parkNameList">
                          {{ item }} <br />
                        </template>
                      </div>
                      <div class="select-form-item-right" v-if="item.parkNameList">
                        {{ item.parkNameList.join(',') }}
                      </div>
                    </el-tooltip>

                  </div>
                </el-option>
              </el-select>
              <div class="ake_btn ake_btn_text check_setting" @click="checkConfigure" :disabled="!saveBill.monthTicketId">查看</div>
              <el-button type="primary" class="ake_btn ake_btn_text" @click="addMonthTicketType">去创建</el-button>
            </div>
          </el-form-item>
        </div>

        <div class="row-item">
          <el-form-item label="车主姓名" prop="userName">
            <el-input placeholder="请输入车主姓名" v-model="saveBill.userName" type="text"></el-input>
          </el-form-item>
          <el-form-item label="购买手机号" prop="userPhone" label-width="80px" style="margin-left:36px">
            <el-input placeholder="请输入购买手机号" v-model="saveBill.userPhone" type="text"></el-input>
          </el-form-item>
        </div>

        <el-form-item class="addCar-form-item" label="车牌号" prop="carCode" v-if="!modalData.supportVirtualCarcode" style="margin-bottom:0px;">
          <el-form-item label-width="0px" :prop="'moreInputCardCode.'+index+'.key'" v-for="(item,index) in saveBill.moreInputCardCode" style="margin-right:10px;display:inline-block;margin-bottom:15px;" :rules="[{required: true,message: '车牌号不能为空',trigger: ['blur','change']},{validator:validateCarCode,trigger: 'change'}]">
            <el-input placeholder="请输入车牌号" type="text" style="width:115px;" v-model="item.key"></el-input>
            <img src="../../assets/img/ic_btn_delete.svg" alt="" @click="delCarCodeInput(index,saveBill.moreInputCardCode)" class="del-carCode">
          </el-form-item>
          <img class="addCarCode" @click="addCarCodeInput" src="../../assets/img/ic_subscribe_add copy.svg" alt="">
        </el-form-item>

        <el-form-item label="无车牌" prop="" v-if="modalData.supportVirtualCarcode===1">
          <div class="bindCarNoMethod-box">
            <a class="ake_btn ake_btn_text" @click.prevent="openScanQrModal(true)">绑定微信</a>
            <a class="ake_btn ake_btn_text" @click.prevent="getBindCardCode()">开新卡</a>
            <a class="ake_btn ake_btn_text" @click.prevent="readOldCard()">读旧卡</a>
          </div>

          <div class="wechat-card-box" v-if="cardNoBoxList.weixin.length">
            <div class="item-list">
              <div class="item" v-for="witem in cardNoBoxList.weixin">
                <div>
                  <p>
                    <span>{{witem.nickname}}</span>
                    <span>{{witem.carCode}}</span>
                  </p>
                </div>
                <img src="../../assets/img/ic_btn_delete.svg" alt="" @click="unBindingCarCode(1,witem)">
              </div>
            </div>
          </div>

          <div class="writeCardNo-box" v-if="cardNoBoxList.writeCard.length">
            <div class="item-list">
              <div class="item" v-for="bitem in cardNoBoxList.writeCard">
                <div>
                  <p>
                    <span>{{bitem.carCode}}</span>
                    <img src="../../assets/img/ic_card2.svg" alt="" v-if="bitem.isWriteCard">
                    <a class="ake_btn" v-else @click="writeCardOfBind(bitem)">写卡</a>
                  </p>
                  <div class="input-carNo-box" v-if="bitem.canWriteCardNo">
                    <el-input v-model.trim="bitem.carNo" placeholder="请备注卡片号码"></el-input>
                    <a @click="saveBingRemarkCardNo(bitem)">完成</a>
                  </div>
                  <p class="modify-box" v-else>
                    <span>卡号：{{bitem.carNo}}</span>
                    <a class="add-btn" @click="bitem.canWriteCardNo=true">修改</a>
                  </p>
                  <p class="tip-red" v-show="bitem.required">请填写备注卡片号码并点击完成</p>
                </div>
                <img src="../../assets/img/ic_btn_delete.svg" alt="" @click="unBindingCarCode(2,bitem)">
              </div>
            </div>
          </div>

          <div class="hadCardNo-box" v-if="cardNoBoxList.hadCard.length">
            <div class="item-list">
              <div class="item" v-for="hitem in cardNoBoxList.hadCard">
                <div>
                  <p>
                    <span>{{hitem.carCode}}</span>
                    <img src="../../assets/img/ic_card2.svg" alt="">
                  </p>
                  <div class="input-carNo-box" v-if="hitem.canWriteCardNo">
                    <el-input v-model.trim="hitem.carNo" placeholder="请备注卡片号码"></el-input>
                    <a @click="saveHadCardNo(hitem)">完成</a>
                  </div>
                  <p class="modify-box" v-else>
                    <span>卡号：{{hitem.carNo}}</span>
                    <a class="add-btn" @click="hitem.canWriteCardNo=true">修改</a>
                  </p>
                  <p class="tip-red" v-show="hitem.required">请填写备注卡片号码并点击完成</p>
                </div>
                <img src="../../assets/img/ic_btn_delete.svg" alt="" @click="unBindingCarCode(3,hitem)">
              </div>
            </div>
          </div>

        </el-form-item>

        <el-form-item label="有效期(自然月)" prop="timeperiodListStr" v-if="modalData.mouthsSetting.monthsType=='NATURAL_MONTH'">
          <div class="col-sm-6" style="display:flex;flex-wrap: wrap;width:100%">
            <div class="col-sm-6" style="width:100%">
              <table class="dateBox" style="width:100%">
                <tr>
                  <td style="text-align:left">
                    <span class="triangle_border_left" @click='cut'>
                    </span>
                  </td>
                  <td colspan="2" style="text-align:center;font-weight:bold;font-size:14px;">
                    <span>{{naturalMonthData.year}}</span>
                  </td>
                  <td style="text-align:right">
                    <span class="triangle_border_right" @click='add'>
                    </span>
                  </td>
                </tr>
                <tr v-for="(item,tt) in naturalMonthData.month" :key="tt">
                  <td v-for="(m,index) in item" :key="m" @click="getMonth(index,tt)" class="month" :class="{NO:(naturalMonthData.year==yearN&&tt*4+index<monthN-1)||!(monthShow.indexOf(naturalMonthData.year+'-'+((tt*4+index+1)>9?tt*4+index+1:('0'+(tt*4+index+1))))==-1)||!(alreadySelect.indexOf(naturalMonthData.year+'-'+((tt*4+index+1)>9?tt*4+index+1:('0'+(tt*4+index+1))))==-1),YES:(monthShow.indexOf(naturalMonthData.year+'-'+((tt*4+index+1)>9?tt*4+index+1:('0'+(tt*4+index+1))))>-1)}">
                    {{m}}
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </el-form-item>

        <el-form-item v-if="modalData.mouthsSetting.monthsType=='CUSTOM'" label="有效期(自定义)" prop="timeperiodListStr">
          <el-date-picker @change="timeChange(saveBill)" v-model="saveBill.timeperiodListStr" type="daterange" align="right" placeholder="请选择有效期" :editable="false" :clearable="false" :picker-options="afterPickerOptions">
          </el-date-picker>
        </el-form-item>

        <div class="row-item">
          <el-form-item label="可用车位数" prop="dynamicCarportNumber">
            <el-input v-if="saveBill.isDynamicMode===1" placeholder="请输入车位数" v-model="saveBill.dynamicCarportNumber" type="number" min='1' step="1"></el-input>
            <div v-else class="text-chunk">{{saveBill.dynamicCarportNumber}}</div>
          </el-form-item>
          <el-form-item :label="modalData.mouthsSetting.monthsType=='CUSTOM' ? '开通天数' : '开通月数'" prop="openMonthNum" label-width="65px" style="margin-left:15px">
            <div class="text-chunk">
              <span>{{saveBill.openMonthNum}}</span>
              <span v-if="modalData.mouthsSetting.monthsType=='CUSTOM'">天</span>
              <span v-else>个月</span>
            </div>
          </el-form-item>
        </div>

        <el-form-item label="月票价格" prop="price">
          <div class="text-chunk">
            <span>单价:</span>
            <span>{{saveBill.price}}</span>
            <span v-if="modalData.mouthsSetting.monthsType=='CUSTOM'">元/天</span>
            <span v-else>元</span>
          </div>
          <div class="text-chunk" style="margin-left:10px;">
            <span>总金额:</span>
            <span>{{saveBill.totalValue}}</span>
            <span>元</span>
          </div>
        </el-form-item>

        <el-form-item label="折后价" prop="realValue">
          <el-input placeholder="请输入折后价" v-model="saveBill.realValue"></el-input>
          <span class="item-unit">元</span>
        </el-form-item>

        <el-form-item label="备注">
          <div class="show-rule-detail-icon" @click="remarkChunkShow=!remarkChunkShow">
            <i class="el-icon-arrow-down" :class="{rotate180:remarkChunkShow}"></i>
          </div>
        </el-form-item>
        <div class="remark-chunk" v-show="remarkChunkShow">
          <el-form-item label="备注1" prop="remark1">
            <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="saveBill.remark1"></el-input>
          </el-form-item>
          <el-form-item label="备注2" prop="remark2">
            <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="saveBill.remark2"></el-input>
          </el-form-item>
          <el-form-item label="备注3" prop="remark3">
            <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="saveBill.remark3"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitBillForm()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('billModal')">取消</button>
    </div>
  </basic-modal>

  <!--续费月票-->
  <basic-modal ref="renewbillModal" width="700" customeClass="bill-modal">
    <h3 slot="title">{{billModalTitle}}</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="renewbillForm" :model="saveBill" :rules="billRules" label-position="left" label-width="115px" class="bill" style="width: 520px"> 
        <div class="row-item">
          <el-form-item label="月票类型">
            <span class="grayChuck">{{saveBill.monthTicketName}}</span>
            <div class="ake_btn ake_btn_text check_setting" @click="checkConfigure(saveBill)">查看</div>
          </el-form-item>
        </div>

        <div class="row-item">
          <el-form-item label="车主姓名" style="margin-right:30px;">
            <span class="grayChuck">{{saveBill.userName}}</span>
          </el-form-item>
          <el-form-item label="购买手机号" label-width="80px">
            <span class="grayChuck">{{saveBill.userPhone}}</span>
          </el-form-item>
        </div>

        <el-form-item label="车牌号" class="carCodeChunk">
          <span class="grayChuck" v-for="item in saveBill.carCodeArr">{{item}}</span>
        </el-form-item>

        <el-form-item label="有效期(自然月)" prop="timeperiodListStr" v-if="modalData.mouthsSetting.monthsType=='NATURAL_MONTH'">
          <div class="col-sm-6" style="display:flex;flex-wrap: wrap;width:100%">
            <div class="col-sm-6" style="width:100%">
              <table class="dateBox" style="width:100%">
                <tr>
                  <td style="text-align:left">
                    <span class="triangle_border_left" @click='cut'>
                    </span>
                  </td>
                  <td colspan="2" style="text-align:center;font-weight:bold;font-size:14px;">
                    <span>{{naturalMonthData.year}}</span>
                  </td>
                  <td style="text-align:right">
                    <span class="triangle_border_right" @click='add'>
                    </span>
                  </td>
                </tr>
                <tr v-for="(item,tt) in naturalMonthData.month" :key="tt">
                  <td v-for="(m,index) in item" :key="m" @click="getMonth(index,tt)" class="month" :class="{NO:(naturalMonthData.year==yearN&&tt*4+index<monthN-1)||!(monthShow.indexOf(naturalMonthData.year+'-'+((tt*4+index+1)>9?tt*4+index+1:('0'+(tt*4+index+1))))==-1)||!(alreadySelect.indexOf(naturalMonthData.year+'-'+((tt*4+index+1)>9?tt*4+index+1:('0'+(tt*4+index+1))))==-1),YES:(monthShow.indexOf(naturalMonthData.year+'-'+((tt*4+index+1)>9?tt*4+index+1:('0'+(tt*4+index+1))))>-1)}">
                    {{m}}
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </el-form-item>

        <el-form-item v-if="modalData.mouthsSetting.monthsType=='CUSTOM'" label="有效期(自定义)" prop="timeperiodListStr">
          <el-date-picker @change="timeChange" v-model="saveBill.timeperiodListStr" type="daterange" align="right" :picker-options="afterPickerOptions" :editable="false" :clearable="false">
          </el-date-picker>
        </el-form-item>

        <div class="row-item">
          <el-form-item label="可用车位数">
            <span class="grayChuck">{{saveBill.dynamicCarportNumber}}</span>
          </el-form-item>
          <el-form-item :label="modalData.mouthsSetting.monthsType=='CUSTOM' ? '开通天数':'开通月数'" label-width="65px" style="margin-left:10px">
            <div class="text-chunk">
              <span>{{saveBill.openMonthNum}}</span>
              <span v-if="modalData.mouthsSetting.monthsType=='CUSTOM'">天</span>
              <span v-else>个月</span>
            </div>
          </el-form-item>
        </div>

        <el-form-item label="月票价格">
          <div class="text-chunk">
            <span>单价:</span>
            <span>{{saveBill.price}}</span>
            <span v-if="modalData.mouthsSetting.monthsType=='CUSTOM'">元/天</span>
            <span v-else>元</span>
          </div>
          <div class="text-chunk" style="margin-left:10px;">
            <span>总金额:</span>
            <span>{{saveBill.totalValue}}</span>
            <span>元</span>
          </div>
        </el-form-item>

        <el-form-item label="折后价" prop="realValue">
          <el-input placeholder="请输入折后价" v-model="saveBill.realValue"></el-input>
          <span class="item-unit">元</span>
        </el-form-item>

        <el-form-item label="备注">
          <div class="show-rule-detail-icon" @click="remarkChunkShow=!remarkChunkShow">
            <i class="el-icon-arrow-down" :class="{rotate180:remarkChunkShow}"></i>
          </div>
        </el-form-item>
        <div class="remark-chunk" v-show="remarkChunkShow">
          <el-form-item label="备注1" prop="remark1">
            <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="saveBill.remark1"></el-input>
          </el-form-item>
          <el-form-item label="备注2" prop="remark2">
            <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="saveBill.remark2"></el-input>
          </el-form-item>
          <el-form-item label="备注3" prop="remark3">
            <el-input placeholder="请输入备注" type="textarea" :rows="3" v-model="saveBill.remark3"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitRenewBillForm('renewbillForm')">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('renewbillModal')">取消</button>
    </div>
  </basic-modal>

  <basic-modal ref="invite_car_code_show_modal" width="580" customeClass="invite_car_code_show_modal" static="true">
    <h3 slot="title">邀请车牌</h3>
    <div class="modal-body" slot="modal-body">
      <multi-fun-table hasCheckboxCol="false" tableBoxId="inviteCarTable" isNeedPrint="false" isSetTable="false" sortColumn='' orderType='' fixed-cols="3" :theads-info="inviteCarTable.theadsInfo" :tbodys-info="inviteCarList">
        <!--普通列-->
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{ scope.$index +1}}</span>
              <span v-else-if="'inviteTime' == props.prop">{{ scope.row.inviteTime |mileSecondToDate }}</span>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>

        <!--操作列内的按钮-->
        <template slot="operateCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" min-width="100">
            <template slot-scope="scope">
              <el-button size="small" type="primary" class="ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:LIST')" @click="deleteInviteCarCode(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </template>

      </multi-fun-table>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text modal-close" @click="closed('invite_car_code_show_modal')">关闭</button>
    </div>
  </basic-modal>

  <basic-modal ref="scanQrcodeModal" width="400" customeClass="scan_qrcode_modal">
    <h3 slot="title">扫描二维码</h3>
    <div class="modal-body" slot="modal-body">
      <img :src="qrImgUrl" alt="">
      <p>请车主用微信扫一扫开通月票</p>
    </div>
    <div class="" slot="modal-footer"></div>
  </basic-modal>

  <basic-modal ref="billResyncModal" width="300" customeClass="" static="true">
    <h3 slot="title">重新同步</h3>
    <div class="modal-body" slot="modal-body">
      <p>是否重新同步订单</p>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitBillResyncForm()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('billResyncModal')">取消</button>
    </div>
  </basic-modal>

  <basic-modal ref="billResyncResultModal" width="600" customeClass="" @closed="clsoeBillResyncResult(false)">
    <h3 slot="title">同步结果</h3>
    <div class="modal-body" slot="modal-body">
      <el-form ref="resyncForm" label-position="left" label-width="400px">
        <p v-for="item in resyncMessage" :key="item">
          {{item}}
        </p>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text" @click.stop="clsoeBillResyncResult(true)">确认</button>
    </div>
  </basic-modal>

  <!-- 解绑车牌询问 -->
  <basic-modal ref="unBindingAskModal" width="500" customeClass="">
    <h3 slot="title">确认解绑</h3>
    <div class="modal-body" slot="modal-body">
      <p>确定解绑“{{unBindingCarCodeObj.carCode}}（{{unBindingCarCodeObj.cardCode}}）”吗？</p>
    </div>
    <div class="modal-footer" slot="modal-footer">
       <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="sureUnBindingCarCode()">解绑</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('unBindingAskModal')">取消</button>
    </div>
  </basic-modal>

  <!-- 展示已绑定的车牌号 -->
  <basic-modal ref="bindingCarCodeModal" width="500" customeClass="">
    <h3 slot="title">车牌号</h3>
    <div class="modal-body" slot="modal-body">
      <p v-for="(item,index) in bindingCarCodeList">
        <span>逻辑卡号{{index+1}}：</span>
        <span>{{item.carCode}}</span>
        <span>({{item.cardCode}})</span>
      </p>
    </div>
    <div class="modal-footer" slot="modal-footer"></div>
  </basic-modal>

  <monthTicketTypeComponent ref="monthTicketTypeComponent" @getMonthTicketList="getMonthTicketList"></monthTicketTypeComponent>
</div>
</template>

<script>
import common from '@mixins/common.js'
import stardardList from '@mixins/tables/stardardList.js'

//modal
import invokeModal from '@mixins/modal/invokeModal.js'

import MonthTicketTypeComponent from "./component";

// 引进vue的js
import js from './js/bill.js'

export default {
  name: 'monthTicketBill',
  mixins: [common, stardardList, invokeModal, js],
  components: {
    monthTicketTypeComponent: MonthTicketTypeComponent
  },
  data() {
    const today = [new Date(moment().format('YYYY-MM-DD 00:00:00')), new Date(moment().format('YYYY-MM-DD 23:59:59'))];
    return {
      dialogVisible: false, //批量导入月票-弹框
      tabIndex: 2, //批量导入月票-tab步骤
      total: 0,
      fixedCols: 4,
      paramName: 'query_parkId',
      searchList: [{ //复合型输入框
          index: 1,
          isShow: false,
          type: "mixedInput",
          name: "query_carCode",
          text: "",
          value: "query_carCode",
          inputVal: "",
          style: {
            width: "70px"
          },
          isHandleChange: true,
          btnFlag: 'query_logicCardCode',
          options: [{
              name: "车牌号",
              value: "query_carCode"
            },
            {
              name: "逻辑卡号",
              value: "query_logicCardCode"
            },
            {
              name: "卡面号码",
              value: "query_faceCardCode"
            }
          ]
        },
        {
          index: 2,
          isShow: false,
          type: 'select',
          name: 'query_ticketName',
          text: '月票类型名称',
          value: '',
          filterable: true,
          options: []
        },
        {
          index: 3,
          isShow: false,
          type: 'select',
          name: 'combinedStatus',
          text: '有效状态',
          value: '',
          options: [{
              name: "--全部--",
              value: ""
            },
            {
              name: "不在有效期",
              value: '0'
            },
            {
              name: "生效中",
              value: '1'
            },
            {
              name: "已退款",
              value: '2'
            }
          ]
        },
        {
          index: 4,
          isShow: false,
          type: 'datePicker',
          name: 'query_payTime',
          text: '最近操作时间',
          propName: 'query_updateTimeStart,query_updateTimeEnd',
          value: '',
          style: {
            width: '360px'
          }
        },
        {
          index: 5,
          isShow: false,
          type: 'text',
          name: 'query_userName',
          text: '车主姓名',
          value: ''
        },
        {
          index: 6,
          isShow: false,
          type: 'text',
          name: 'query_userPhone',
          text: '手机号',
          value: ''
        },
        {
          index: 7,
          isShow: false,
          type: 'text',
          name: 'query_ticketCode',
          text: '月票类型编号',
          value: ''
        },
        {
          index: 8,
          isShow: false,
          type: 'text',
          name: 'query_remark1',
          text: '备注1',
          value: ''
        },
        {
          index: 9,
          isShow: false,
          type: 'text',
          name: 'query_remark2',
          text: '备注2',
          value: ''
        },
        {
          index: 10,
          isShow: false,
          type: 'text',
          name: 'query_remark3',
          text: '备注3',
          value: ''
        }
      ],
      theadsInfo: [{
          index: 1,
          isShow: false,
          prop: 'ticketName',
          text: '月票类型',
          minWidth: 60,
        },
        {
          index: 2,
          isShow: false,
          prop: 'ticketCode',
          text: '月票类型编号',
          minWidth: 60,
          initHidden: true,
        },
        {
          index: 3,
          isShow: false,
          prop: 'userName',
          text: '车主姓名',
          minWidth: 50
        },
        {
          index: 4,
          isShow: false,
          prop: 'userPhone',
          text: '车主手机号',
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: 'dynamicCarportNumber',
          text: '可用车位数',
          minWidth: 50,
        },
        {
          index: 6,
          isShow: false,
          prop: 'carCode',
          text: '车牌号',
          minWidth: 50
        },
        {
          index: 7,
          isShow: false,
          prop: 'inviteCarCurrentCount',
          text: '邀请车牌',
          minWidth: 50,
          initHidden: true
        },
        {
          index: 8,
          isShow: false,
          prop: 'timeperiodList',
          text: '有效期',
          minWidth: 60
        },
        {
          index: 9,
          isShow: false,
          prop: 'renewStr',
          text: '是否允许续费',
          minWidth: 100
        },
        {
          index: 10,
          isShow: false,
          prop: 'endRenewTime',
          text: '续费截止时间',
          minWidth: 80,
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: 'remark1',
          text: '备注1',
          initHidden: true
        },
        {
          index: 12,
          isShow: false,
          prop: 'remark2',
          text: '备注2',
          initHidden: true
        },
        {
          index: 13,
          isShow: false,
          prop: 'remark3',
          text: '备注3',
          initHidden: true
        },
        {
          index: 14,
          isShow: false,
          prop: 'price',
          text: '单价',
        },
        {
          index: 15,
          isShow: false,
          prop: 'createTime',
          text: '开通时间',
          minWidth: 80
        },
        {
          index: 16,
          isShow: false,
          prop: 'buyMethodName',
          text: '开通方式',
        },
        {
          index: 17,
          isShow: false,
          prop: 'updateBy',
          text: '最近操作人',
        },
        {
          index: 18,
          isShow: false,
          prop: 'updateTime',
          text: '最近操作时间',
          minWidth: 80,
        },
        {
          index: 19,
          isShow: false,
          prop: 'combinedStatusStr',
          text: '有效状态',
        },
        {
          index: 20,
          isShow: false,
          prop: 'sendStatus',
          text: '下发状态',
          initHidden: true
        },
      ],
      tbodysInfo: []
    }
  }
}
</script>

<style>
/*滚动条样式*/
.dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.dropdown-menu::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>

<style lang="less">
.import-ticket {
  .el-dialog__body {
    padding: unset;
  }
}

.bill {
  .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>


<style lang="less" scoped>
.check_setting {
  margin-left: 8px;
}

.del-carCode {
  position: absolute;
  top: 6px;
  right: 2px;
  cursor: pointer;
}

.form-item-text {
  display: inline-block;
  background: #F4F4F4;
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #333333;
  padding-left: 10px;
  width: 100%;
}

.row-href {
  color: #337ab7;
  cursor: pointer;
}

.addCarCode {
  cursor: pointer;
  transform: translateY(-8px);
}

.el-select-dropdown {
  border: 1px solid #e4e7ed;
  background-color: #fff;
  min-width: 256px;
  box-shadow: 0 2px 8px 0 rgba(53, 59, 69, 0.30);
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 100%;

  .dropdown-menu {
    max-height: 274px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-bottom: 45px;

    >li {
      font-size: 14px;
      padding: 0 20px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #606266;
      height: 34px;
      line-height: 34px;
      box-sizing: border-box;
      cursor: pointer;

      &:hover {
        background-color: #f5f7fa;
      }
    }
  }

  .add-btn {
    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding-left: 20px;
    border-top: 1px solid rgba(215, 220, 226, 0.6);
    cursor: pointer;

    >span {
      font-size: 14px;
      color: #5995D8;
      padding-left: 5px;
    }

    >img {
      position: relative;
      bottom: 2px;
    }
  }
}

.rotate {
  &.rotate180 {
    transform: rotate(180deg);
  }
}

.show-rule-detail-icon {
  height: 100%;
  width: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: inline-block;

  .el-icon-arrow-down {
    font-size: 18px;
    color: #B0B0B0;
    transition: transform 0.25s ease-in;
    transform-origin: center center;

    &.rotate180 {
      transform: rotate(-180deg);
    }
  }
}

.item-unit {
  position: absolute;
  right: 10px;
  bottom: -2px;
}

.row-item {
  display: flex;
  >div {
    &.el-form-item {
      flex: 1;
    }
  }
}

span {
  &.grayChuck {
    display: inline-block;
    background: #F4F4F4;
    border-radius: 4px;
    padding: 0px 10px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #666666;
    flex: 1;
  }
}

.carCodeChunk {
  >.el-form-item__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    >span {
      &.grayChuck {
        flex: unset;
      }
    }
  }
}

.text-chunk {
  display: inline-block;
  background: #F4F4F4;
  border-radius: 4px;
  padding: 0px 10px;
  position: relative;
  height: 32px;
  line-height: 32px;
  flex: 1;

  span {
    font-size: 14px;
    color: #666666;

    &:last-child {
      position: absolute;
      right: 10px;
    }
  }
}

.scan_qrcode_modal {
  .modal-body {
    text-align: center;

    img {
      width: 190px;
      height: 190px;
      display: inline-block;
      margin-bottom: 20px;
    }

    p {
      font-size: 14px;
      color: #666666;
      letter-spacing: 0.4px;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}

.bindCarNoMethod-box {
  .ake_btn {
    margin-right: 10px;
  }

  display:flex;
}

.wechat-card-box {
  .item-list {
    .item {
      p {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.wechat-card-box,
.writeCardNo-box,
.hadCardNo-box {
  .item-list {
    .item {
      display: flex;

      >div {
        background: #F2F2F2;
        border-radius: 4px;
        width: 376px;
        padding: 12px;
        display: flex;
        >p {
          display: flex;
          line-height: 20px;
          width: 170px;
          display: flex;
          align-items: center;
          margin-right: 10px;
          &:first-child {
            position: relative;

            >img,
            >a {
              position: absolute;
              right: 0;
            }

            >span {
              font-size: 16px;
              color: #333333;
            }

            >a {
              color: #fff;
              background: #5995D8;
              border-radius: 3px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              font-size: 11px;
              cursor: pointer;
              padding: unset;
            }
          }

          >a {
            color: #337ab7;
            cursor: pointer;
          }

          &.modify-box {
            height: 40px;
            line-height: 40px;
            justify-content: space-between;
            padding-right: 5px;
          }

          &.tip-red {
            color: red;
            font-size: 11px;
          }
        }

        .input-carNo-box {
          .el-input {
            width: 80%;
          }

          >a {
            color: #337ab7;
            margin-left: 6px;
            cursor: pointer;
          }
        }
      }

      >img {
        margin-left: 10px;
        cursor: pointer;
      }

      margin-top:12px;
    }
  }
}

.import-modal {
  padding-bottom: 30px;

  .first-item {
    width: 200px;
  }

  .modal-body {
    overflow-y: scroll;
  }

  .file-input {
    .el-input__inner {
      display: block;
      width: 100%;
      height: 30px;
      padding: 0px !important;
      font-size: 14px;
      line-height: 30px;
      color: #555;
      background-color: none;
      background-image: none !important;
      border: 0px solid #CCCCCC !important;
      border-radius: 0px;
      box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075);
      transition: border-color ease-in-out 0s, box-shadow ease-in-out 0s;
    }
  }

  .help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
    font-size: 13px;
  }

  a {
    color: #23527c;
    text-decoration: underline;
  }

  .import-notice {
    margin-left: 50px;
  }

  h5 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px;
  }

  p {
    margin: 0 0 10px;
  }
}

.bill-modal {
  
  .el-input.is-disabled .el-input__inner {
    background-color: #eef1f6;
    border-color: #d1dbe5;
    color: #333 !important;
    cursor: not-allowed;
  }

  .showMonth {
    margin-right: 15px;
    color: white;
    background-color: #999;
    padding: 0 5px;
    margin-bottom: 5px;
  }

  .showMonth span {
    margin-left: 5px;
    cursor: pointer;
  }

  .dateBox {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    > tr{
      &:first-child{
        height: 30px;
        line-height: 30px;
        > td{
          line-height: 1;
        }
      }
    }
  }

  .dateBox .month {
    width: 65px;
    height: 45px;
    border: 1px #ccc solid;
    padding: 10px;
    text-align: center;
  }

  .dateBox .month:hover {
    background-color: lighten(#5995D8, 35%);
    cursor: pointer;
  }

  .dateBox .month.NO {
    background-color: #F1F1F1;
    color: #666;
  }

  .dateBox .month.YES {
    background-color: #5995D8;
    color: #fff;
  }

  .dateBox .triangle_border_left {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-top: 8px solid transparent;
    border-right: 10px solid #A5A5A5;
    border-bottom: 8px solid transparent;
  }

  .dateBox .triangle_border_right {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-top: 8px solid transparent;
    border-left: 10px solid #A5A5A5;
    border-bottom: 8px solid transparent;
  }
}

.srceen-setting-content {
  padding-bottom: 50px;

  .tabBox-wrap {
    border-bottom: 1px solid #D7DCE2;
    display: flex;

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 15px 0;
      cursor: pointer;

      span {
        &:first-child {
          display: inline-block;
          height: 20px;
          width: 20px;
          background: #D7DCE2;
          border-radius: 10px;
          color: #fff;
        }

        &:last-child {
          color: #999999;
        }
        margin-left: 5px;
      }

      &.active {
        border-bottom: 3px solid #5995D8;

        span {
          &:first-child {
            background: #5995D8;
          }

          &:last-child {
            color: #5995D8;
          }
        }
      }
    }
  }

  .download-file-row {
    padding-left: 80px;
    margin: 30px 0 20px 0;
    display: flex;
    align-items: center;

    .template-file-box {
      display: flex;
      align-items: center;
      border: 1px solid #C1C1C1;
      border-radius: 4px;
      padding: 0px 10px 0px 5px;
      margin: 0px 10px;

      >div {
        display: flex;
        flex-direction: column;

        >span {
          &:last-child {
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }

    .download-btn-box {
      cursor: pointer;

      >span {
        color: #5995D8;
      }
    }
  }

  .warm-tip-box {
    padding-left: 80px;

    .tip-font-box {
      margin-top: 10px;

      >p {
        height: 20px;
      }
    }
  }

  .box-title {
    font-size: 14px;
    color: #666666;
  }

  .import-file-wrap {
    padding-left: 80px;
    padding-bottom: 80px;

    .import-file-row {
      display: flex;
      align-items: center;
      margin-top: 30px;
    }

    .upload-file-tip {
      padding-left: 70px;
      font-size: 12px;
      color: #999999;
      line-height: 20px;
    }

    .upload-file-result {
      margin-top: 20px;
    }
  }
}

.import-file-result {
  .success-box {
    >span {
      margin-left: 10px;
    }
  }

  .error-box {
    display: flex;

    >div {
      margin-left: 10px;
      padding-right: 30px;
      display: flex;
      flex-direction: column;
    }
  }
}

.select-form-item {
  display: flex;
  width: 100%;

  .el-select {
    flex: 1;
  }

  .ake_btn {
    margin-left: 10px;
  }
}

.select-form-item-bd {
  display: flex;
  align-items: center;
  width: 242px;

  .select-form-item-left {
    flex: 1;
    font-size: 12px;
    color: #474747;
    margin-right: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .select-form-item-right {
    width: 86px;
    background: #F4F4F4;
    border-radius: 2px;
    font-size: 12px;
    color: #888888;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>

<style lang="less">
.upload-file-wrap {
  display: flex;

  .el-upload {
    display: flex;

    .el-input {
      margin-right: 10px;
    }
  }
}

.addCar-form-item {
  .el-form-item__content {
    display: flex;
    align-items: center;
  }
}
</style>
